<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            border: 2px solid blue;
            border-radius: 7px;
            width: 400px;
        }
        
        .myList {
            display: none;
        }
        
        .myList1 {
            display: block;
        }
        
        .myList2 {
            display: block;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="div1">
        <input type="text" id="myIpt">
        <ul id="myList" class="myList">
            <li>aaaa</li>
            <li>bbbb</li>
            <li>cccc</li>
            <li>dddd</li>
        </ul>
    </div>
    <button type="button" class="btn1">点我</button>
</body>

</html>
<script>
    let btn1 = document.querySelector(".btn1");
    let myIpt = document.querySelector("#myIpt");
    let myList = document.querySelector("#myList");

    myIpt.addEventListener("focus", showList);
    myIpt.addEventListener("blur", hiddenList);
    myIpt.addEventListener("focus", showBg);

    function showList() {
        myList.className = "myList1";
    }


    function showBg() {
        myList.className = "myList2";

    }

    function hiddenList() {
        myList.className = "myList";
    }

    btn1.addEventListener("click", removeEvent);

    function removeEvent() {
        myIpt.removeEventListener("focus", showBg);
    }

    btn1.onclick = HUAWEI;

    function HUAWEI() {
        alert("陆梓峰 24510206097");
    }


    // btn1.onclick = null;
    // let div1 = document.querySelector(".div1");

    // let myIpt = document.querySelector("#myIpt");

    // btn1.onclick = function() {
    //     alert("123");
    // }

    // btn1.onclick = Test;


    // function Test() {
    //     // alert("外部剧名方法");
    //     Test1();
    //     Test2();
    // }

    // function Test1() {
    //     alert("test1");
    // }

    // function Test2() {
    //     alert("test2");
    // }
</script>